<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网上售饭系统</title>
</head>
<style>
  .img-group {
    position: relative;
    display: inline-block;
  }

  .img-tip {
    position: absolute;
    bottom: 0;
    background: #333;
    color: #fff;
    opacity: 0.6;
    display: none;
  }

  .img-group:hover .img-tip {
    display: block;
    width: 100%;
    text-align: center;
  }
</style>
<link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>


<body>
  <div class="layui-layout layui-layout-admin" id="app">
    <!-- 头部 -->
    <div class="layui-header" style="background-color:aqua;">
      <div class="layui-logo" style="font-size:20px;">网上售饭系统</div>
      <ul class="layui-nav layui-layout-left">
        <li class="layui-nav-item">
          <a href="javascript:;" style="color: darkmagenta;">
            {{stuno}}
          </a>

        </li>
      </ul>
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item "><button class="layui-btn layui-btn-primary layui-anim layui-anim-scale"
            onclick="user()">个人信息</button></li>
        <li class="layui-nav-item "><button class="layui-btn layui-btn-warm  layui-anim layui-anim-scale"
            onclick="loginOut()">退出</button></li>
      </ul>
    </div>
    <!-- 中间 -->

    <div>
      <div class="layui-tab">
        <ul class="layui-tab-title">
          <li class="layui-this">荤菜组</li>
          <li>素菜组</li>
          <li>面食组</li>
          <li>购物车</li>
        </ul>

        <!-- 图片 -->

        <div class="layui-tab-content">
          <!-- 荤菜 -->
          <div class="layui-tab-item layui-show">
            <div>
              <div id="huncai1">
                <div v-for="imgsrc in huncai" style="float: left;" class="img-group">
                  评价<div>
                  </div>
                  <div><button class="layui-btn layui-btn-normal"
                      @click="goumai(imgsrc.id,imgsrc.name,imgsrc.price)">购物车</button>
                    <button class="layui-btn layui-btn-normal" @click="pingfen(imgsrc.id)">评分</button>
                  </div>
                  <div class="img-tip">{{imgsrc.name}} {{imgsrc.price}}</div>
                  <img :src="'/res/static/img/'+imgsrc.id+'.png'" width="150px" height="150px"
                    style="margin: 20px;" /></img>
                </div>
              </div>
            </div>
          </div>
          <!-- 素菜 -->

          <div class="layui-tab-item">
            <div id="sucai1">
              <div v-for="imgsrc2 in sucai" style="float: left;" class="img-group">
                评价<div></div>
                <div><button class="layui-btn layui-btn-normal"
                    @click="goumai(imgsrc2.id,imgsrc2.name,imgsrc2.price)">购物车</button>
                  <button class="layui-btn layui-btn-normal" @click="pingfen(imgsrc2.id)">评分</button>
                </div>
                <img :src="'/res/static/img/'+imgsrc2.id+'.png'" width="150px" height="150px" style="margin: 20px;"
                  @click="goumai(imgsrc2.id,imgsrc2.name,imgsrc2.price)" /></img>
                <div class="img-tip">{{imgsrc2.name}} {{imgsrc2.price}}</div>
              </div>
            </div>
          </div>
          <!-- 面食 -->

          <div class="layui-tab-item">
            <div id="mianshi1">
              <div v-for="imgsrc3 in mianshi" style="float: left;" class="img-group">
                评价<div></div>
                <div><button class="layui-btn layui-btn-normal"
                    @click="goumai(imgsrc3.id,imgsrc3.name,imgsrc3.price)">购物车</button>
                  <button class="layui-btn layui-btn-normal" @click="pingfen(imgsrc3.id)">评分</button>
                </div>
                <img :src="'/res/static/img/'+imgsrc3.id+'.png'" width="150px" height="150px" style="margin: 20px;"
                  @click="goumai(imgsrc3.id,imgsrc3.name,imgsrc3.price)" /></img>
                <div class="img-tip">{{imgsrc3.name}} {{imgsrc3.price}}</div>
              </div>
            </div>
          </div>
          <!-- 购物车--------- -->
          <div class="layui-tab-item">
            <div style="float:inline-end;">
              <div v-for="imgsrc1 in dingdan" style="float: left;" class="img-group" v-show="imgsrc1.see">
                <div>
                  <!-- <input type="text" :id=imgsrc1.id required lay-verify="required" placeholder="请输入数量"
                    autocomplete="off" class="layui-input" style="width: 120px;" value="1"> -->
                  <input class="addBtn min layui-btn layui-btn-primary" style="float: left;" type="button" value="-" @click="minMoney(imgsrc1.id)"/>
                  <input class="join-money layui-input" style="width: 100px;float: left;" :id=imgsrc1.id type="text"
                    value="1">
                  <input class="addBtn add glyphicon-chevron-up layui-btn layui-btn-normal" type="button" value="+"
                    @click="addMoney(imgsrc1.id)" /><br>
                </div>
                <img :src="'/res/static/img/'+imgsrc1.id+'.png'" width="150px" height="150px" style="margin: 20px;"
                  @click="clear(imgsrc1.id)" v-if="imgsrc1.id" /></img>
                <div class="img-tip">{{imgsrc1.name}} {{imgsrc1.price}}</div>
              </div>
            </div>
            <div>
              <input type="submit" onclick="qingkong()" value="清空购物车" class="layui-btn layui-btn-normal">

              <input type="submit" onclick="jiesuan()" value="结算" class="layui-btn layui-btn-normal">
            </div>


          </div>

        </div>
      </div>
    </div>

  </div>
  <div class="social-share1" style="text-align:center; display:none;" id="shareDiv">
    <img id="testimg" style="float:right;cursor:pointer" alt="" width="300" height="300" />
  </div>
  <div class="social-share1" style="text-align:center; display:none;" id="sharePin">
    <h2>评分</h2>
    <div style="margin-top: 20px;">
      <div id="test1"></div>
    </div>
  </div>
</body>
<script>


  layui.use(['jquery', 'form', 'layer', 'element', 'code', 'rate'], function () {
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var element = layui.element;
    var code = layui.code;
    var rate = layui.rate;
    rate.render({
      elem: '#test1'
      , value: vm1.pingfen //初始值
      , text: true //开启文本
      , choose: function (value) {
        vm1.pingfen = value;
      }
    });
    var hunArr = $("#huncai1").find("div");
    var suArr = $("#sucai1").find("div");
    var mianArr = $("#mianshi1").find("div");
    for (var anum = 1; anum <= vm.huncai.length * 4 + 1; anum++) {
      // 渲染
      rate.render({
        elem: hunArr[anum]
        , value: 2/*vm1.pingfen*/
        , readonly: true
        , half: true
        , text: true
      });
      anum += 3;
    } for (var anum = 1; anum <= vm.sucai.length * 4 + 1; anum++) {
      // 渲染
      rate.render({
        elem: suArr[anum]
        , value: 2/*vm1.pingfen*/
        , readonly: true
        , half: true
        , text: true
      });
      anum += 3;
    } for (var anum = 1; anum <= vm.mianshi.length * 4 + 1; anum++) {
      // 渲染
      rate.render({
        elem: mianArr[anum]
        , value: 2/*vm1.pingfen*/
        , readonly: true
        , half: true
        , text: true
      });
      anum += 3;
    }
  });
  var vm1 = new Vue({
    el: "#sharePin",
    data: {
      'id': "hot1",
      'pingfen': 1
    }
  });

  var vm = new Vue({
    el: "#app",
    data: {
      'see': true,
      'stuno': "1706032123",
      'stuName': "admin",
      'className': "3班",
      'huncai': [
        {
          'id': "hot1",
          'name': "红烧",
          'price': "21.00"
        },
        {
          'id': "logo",
          'name': "红烧",
          'price': "21.00"
        },
        {
          'id': "hot2",
          'name': "红烧",
          'price': "21.00"
        }
      ],
      'sucai': [
        {
          'id': "hot3",
          'name': "红烧",
          'price': "21.00"
        },
        {
          'id': "hot4",
          'name': "红烧",
          'price': "21.00"
        }
      ],
      'mianshi': [
        {
          'id': "hot5",
          'name': "红烧",
          'price': "21.00"
        },
        {
          'id': "hot6",
          'name': "红烧",
          'price': "21.00"
        }
      ],
      'dingdan': [
        {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        },
        {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        }, {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        }, {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        }, {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        },
        {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        }
      ],
      'qingkong': [
        {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        },
        {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        }, {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        }, {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        }, {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        },
        {
          'id': null,
          'name': null,
          'price': null,
          'see': false
        }
      ],
      'gouwu': {
        'time': "",
        'id': [],
        'num': [],
        'price': ""
      },
      'gold': [0, 0, 0, 0, 0]
    },
    methods: {
      // 添加到购物车
      goumai(res, name, price) {
        var num = 0;
        for (num; num <= 5; num++) {
          for (var c = 0; c < 5; c++) {
            if (this.dingdan[c].id == res) {
              layer.alert('该商品已存在购物车', { title: '添加失败' }, function (index) {
                layer.close(index);
              });
              return false;
            }
          }
          if (this.dingdan[num]) {
            if (this.dingdan[num].id == null && num < 5) {
              this.dingdan[num].id = res;
              this.dingdan[num].name = name;
              this.dingdan[num].price = price;
              this.dingdan[num].see = true;
              Vue.set(this.dingdan, num, this.dingdan[num]);
              layer.alert('已添加到购物车', { title: '添加成功' }, function (index) {
                layer.close(index);
              });
              return false;
            }
            else if (num == 5) {
              layer.alert('已添加数量达上限，最多添加五个菜品', { title: '添加失败' }, function (index) {
                layer.close(index);
              });
            }
          }
          else {
            layer.alert('已添加数量达上限，最多添加五个菜品', { title: '添加失败' }, function (index) {
              layer.close(index);
            });
            break;
          }

        }
      },
      //清除购物车
      clear(res) {
        this.dingdan[5].id = null;
        this.dingdan[5].name = null;
        this.dingdan[5].price = null;
        this.dingdan[5].see = false;
        Vue.set(this.dingdan, 5, this.dingdan[5]);
        var j = 1;
        var b = 0;
        for (b; b < 5; b++) {
          if (this.dingdan[b].id == res) {
            var a = b;
            if (a == 4) {
              this.dingdan[4].id = null;
              this.dingdan[4].name = null;
              this.dingdan[4].price = null;
              this.dingdan[4].see = false;
              Vue.set(this.dingdan, 4, this.dingdan[4]);
              break;
            }
            else {
              var c = b;
              for (c; c <= 4; c++) {
                this.dingdan[c] = this.dingdan[c + 1];
                Vue.set(this.dingdan, c, this.dingdan[c]);

              }
              break;
            }
          }
        }
        layer.alert('已清除订单', { title: '购物车' }, function (index) {
          layer.close(index);
        });
      },
      //评分
      pingfen(res) {
        vm1.id = res;
        layer.open({
          type: 1,
          skin: '', //样式类名
          title: false,
          offset: 'auto',
          area: ['300px', '150px'], //宽高
          closeBtn: 1, //不显示关闭按钮
          shade: 0,
          anim: 2,
          time: 8000,
          shadeClose: true, //开启遮罩关闭
          content: $("#sharePin")
        });
      }
      //
      , addMoney(res) {
        for (var num = 0; num <= 4; num++) {
          if (this.dingdan[num].id == res) {
            var dId = this.dingdan[num].id;
            var dPr = this.dingdan[num].price;
            var money1 = parseInt(document.getElementById(dId).value);
            document.getElementById(dId).value = money1 + 1;
            console.log(document.getElementById(dId).value);

          }
        }
      },
      minMoney(res){
        for (var num = 0; num <= 4; num++) {
          if (this.dingdan[num].id == res && document.getElementById(this.dingdan[num].id).value > 1) {
            var money1 = parseInt(document.getElementById(this.dingdan[num].id).value);
            document.getElementById(this.dingdan[num].id).value = money1 - 1;
          }
        }
      }

    }
  });
  //清空购物车
  function qingkong() {
    vm.dingdan = vm.qingkong;
  }

  //结算
  function jiesuan() {
    var gold1 = 0;
    for (var num = 0; num <= 4; num++) {
      if (vm.dingdan[num].id != null) {
        var dId1 = vm.dingdan[num].id;
        var dPr1 = vm.dingdan[num].price;
        var dindan = parseInt(document.getElementById(dId1).value);
        vm.gold[num] = dPr1 * dindan;
        gold1 += vm.gold[num];
        vm.gouwu.id[num] = dId1;
        vm.gouwu.num[num] = dindan;
      }
      else {
        break;
      }
    }
    var time = new Date();
    vm.gouwu.time = time.toLocaleString();
    vm.gouwu.price = gold1;
    layer.open({
      content: '总金额：' + gold1 + '元'
      , btn: ['购买']
      , yes: function (index, layero) {
        //按钮【按钮一】的回调
        $.ajax({
          url: "getOrder.action",
          data: JSON.stringify
            ({
              'stuno': vm.stuno,
              'time': vm.gouwu.time,
              'id': vm.gouwu.id,
              'num': vm.gouwu.num
            }),
          dataType: "json",
          type: "POST",
          success: function (req) {
          },
          error: function (msg) {
            console.log(msg);
            layer.alert('购买失败', { title: '购买' }, function (index) {
              layer.close(index);
            });
          }
        });
        $("#testimg").attr("src", "http://qr.liantu.com/api.php?text=" + 'https://qr.alipay.com/fkx18423imjzdpgfqlq3782');
        layer.open({
          type: 1,
          skin: '', //样式类名
          title: false,
          offset: 'auto',
          area: ['300px', '300px'], //宽高
          closeBtn: 0, //不显示关闭按钮
          shade: 0,
          anim: 2,
          time: 8000,
          shadeClose: true, //开启遮罩关闭
          content: $("#shareDiv")
        });
      }
      , cancel: function () {
        //右上角关闭回调
        location.href = "index.html";
        //return false 开启该代码可禁止点击该按钮关闭
      }
    });
  }
  //个人信息--------------
  function user() {
    var stuno = vm.stuno;
    var stuName = vm.stuName;
    var className = vm.className
    var url = "user.html?stuno=" + stuno + "&stuName=" + stuName + "&className=" + className;
    window.location.href = url;
  }
  //退出------------------
  function loginOut() {
    location.href = "login.html";
  }
  //加载菜品,个人信息---------------
  $(function () {
    vm.stuno = getParams("stuno");
    //获取传过来的值
    function getParams(key) {
      var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    };
    //请求菜品----
    $.ajax({
      url: "getAllDishes.action",
      dataType: "json",
      type: "POST",
      success: function (req) {
        //荤菜
        vm.huncai = req.meat;
        vm.sucai = req.vege;
        vm.mianshi = req.noodle;
        vm.stuName = req.stuName;
        vm.className = req.className;
        // for (var i = 0; i < vm.huncai.length; i++) {
        //   rate.render({
        //     elem: '#hot1'
        //     , value: 2 //初始值
        //     , text: true //开启文本
        //   });
        // }
      },
      error: function (msg) {
        console.log(msg);
        layer.alert('查询失败', { title: '菜单' }, function (index) {
          layer.close(index);
        });
      }
    });
    //请求个人信息----
    $.ajax({
      url: "getAllDishes.action",
      dataType: "json",
      data: {
        'id': vm.stuno
      },
      type: "POST",
      success: function (req) {
        vm.stuName = req.stuName;
        vm.className = req.className;
      },
      error: function (msg) {
        console.log(msg);
        layer.alert('查询失败', { title: '菜单' }, function (index) {
          layer.close(index);
        });
      }
    });
  })
</script>

</html>